<template>
	<view>
		<image :src="menu.imgSrc" style="width: 100%;" mode="widthFix"></image>
		<view class="container">

			<view class="menu-view">
				<view class="name-text">{{menu.name}}</view>
				<view class="msg-view">
					<view class="colum">
						<view class="item">
							<uni-icons type="flag" size="22"></uni-icons>
							<text>难度：{{menu.difficulty}}</text>
						</view>
						<view class="item">
							<uni-icons type="hand-up" size="22"></uni-icons>
							<uni-rate size="16" :readonly="true" :value="menu.rate" />
							<text>{{menu.rate}}分</text>
						</view>
					</view>
					<view class="colum" style="margin-left: 20px;">
						<view class="item" style="margin-left: 3px;">
							<uni-icons custom-prefix="iconfont" type="icon-history" size="16"></uni-icons>
							<text style="margin-left: 3px;">时长：{{menu.duration}}</text>
						</view>
						<view class="item">
							<uni-icons type="fire" size="22"></uni-icons>
							<text>热度：{{menu.madeNum}}人做过</text>
						</view>
					</view>
				</view>
			</view>

			<view class="main-view materials-view">
				<view class="title">
					<text>·食材清单</text>
				</view>
				<view class="material-list">
					<view class="item" v-for="(item,i) in menu.materials" :key="i">
						<view class="text-row">
							<text>{{item.name}}</text>
							<text>{{item.need}}</text>
						</view>
					</view>
				</view>
			</view>

			<view class="main-view materials-buy-view">
				<view class="title">
					<text>·食材加购</text>
				</view>
				<view class="goods-list">
					<view class="item-box" v-for="(item,i) in menu.materials" :key="i">
						<image :src="item.imgSrc" mode="aspectFit">
						</image>
						<view class="item-name-text">
							<text>{{item.name}}</text>
						</view>
					</view>
				</view>
				<view class="btn-row">
					<button type="default" @click="addAllToCart">一键加入购物清单</button>
				</view>
			</view>

			<view class="main-view cook-step-view">
				<view class="title">
					<text>·烹饪步骤</text>
				</view>
				<view class="step-list">
					<view class="item" v-for="(item,i) in _steps" :key="i">
						<view class="step">
							<text>第 {{i+1}} 步</text>
						</view>
						<image :src="item.imgSrc" mode="widthFix"></image>
						<view class="desc">
							<text>{{item.desc}}</text>
						</view>
					</view>
				</view>
				<view class="load-more" style="padding-bottom: 15px;">
					<uni-load-more color="#007AFF" :status="status" :content-text="contentText" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'

	export default {
		data() {
			return {
				menu: {},
				num: 2,
				status: 'more',
				contentText: {
					contentdown: '查看更多',
					contentrefresh: '加载中...',
					contentnomore: '到底了'
				}
			};
		},

		computed: {
			// 要展示的步骤
			_steps() {
				return this.menu.steps?.slice(0, this.num)
			},
			...mapState("user", ["userinfo"])
		},

		onLoad(options) {
			this.getMenuDetail(options.menuId)
		},

		onReachBottom() {
			this.loadMore()
		},

		methods: {
			...mapMutations('cart', ['addToCart']),
			// 请求
			async getMenuDetail(menuId) {
				await uni.$api.menu.getMenuDetail(menuId).then((menu) => {
					this.menu = menu
				})
			},

			// 事件处理
			// 一键加入购物车
			addAllToCart() {
				this.menu.materials.forEach(x => {
					if (x.id)
						this.addToCart({
							id: x.id,
							sponsor: this.userinfo.nickName,
							isChecked: false,
							imgSrc: x.imgSrc,
							name: x.name,
							num: x.num
						})
				})
				uni.showModal({
					title: 'Tips',
					content: '已加入购物清单，是否前去查看？',
					success: (res) => {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pagesSub/pageMenu/cart/cart'
							})
						}
					}
				})
			},
			// 加载更多
			loadMore() {
				if (this.status == 'more') {
					this.status = 'loading'
					setTimeout(() => {
						this.num = this.num + 6
						if (this.num < this.menu.steps.length)
							this.status = 'more'
						else this.status = 'noMore'
					}, 1000)
				}
			}
		}
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}
</style>

<style lang="scss">
	.container {
		padding: 2% 5%;

		.menu-view {
			.name-text {
				font-size: 20px;
				font-weight: 600;
				width: 100%;
			}

			.msg-view {
				font-size: 15px;
				width: 100%;
				display: flex;
				align-items: center;

				.colum {
					.item {
						padding-top: 10px;
						display: flex;
						align-items: center;

						>text {
							white-space: nowrap;
						}
					}
				}
			}
		}

		.main-view {
			margin-top: 25px;
			width: 100%;

			.title {
				font-size: 18px;
				// 小程序中文字体只能使用阴影来实现较小的粗细程度的
				text-shadow: 1px 0px 0px #000;
				margin-bottom: 10px;
			}
		}

		.materials-view {
			.material-list {
				.item {
					border-bottom: 1px dashed #000;
					font-size: 16px;

					.text-row {
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 10px 0;
					}
				}
			}
		}

		.materials-buy-view {
			.goods-list {
				display: flex;
				flex-wrap: wrap;
				border-radius: 20rpx 20rpx 0 0;
				padding: 10px;
				border: 1px solid #e5e6eb;

				.item-box {
					position: relative;
					overflow: hidden;
					border-radius: 20rpx;
					width: 23%;
					margin: 0 1%;
					align-items: center;
					justify-content: center;

					>image {
						border-radius: 20rpx;
						width: 100%;
						height: 150rpx;
					}

					.item-name-text {
						background-color: rgba(4, 11, 5, 0.5);
						width: 100%;
						position: absolute;
						bottom: 0;
						color: #fff;
						display: flex;
						justify-content: center;
						border-radius: 0 0 20rpx 20rpx;
					}
				}
			}

			.btn-row {
				display: flex;
				border-radius: 0 0 20rpx 20rpx;
				border: 1px solid #e5e6eb;
				padding: 10px;

				>button {
					background-color: #4dd865;
					color: #000;
					border-radius: 50px;
					margin-right: 10px;
				}
			}
		}

		.cook-step-view {
			.step-list {
				padding-top: 10px;
				font-size: 17px;

				.item {
					position: relative;
					margin-bottom: 15px;

					.step {
						position: absolute;
						top: 0;
						left: 0;
						background-color: #94bfff;
						color: #fff;
						padding: 10px;
						border-radius: 20rpx 0 20rpx 0;
						font-weight: 550;
					}

					>image {
						width: 100%;
						border-radius: 20rpx;
					}

					.desc {
						padding-top: 5px;
					}
				}
			}
		}

	}
</style>